﻿<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <script type="text/javascript">
        var PAYMILL_PUBLIC_KEY = 'YOUR PUBLIC KEY';
        var VALIDATE_CVC = true;
    </script>
    <link href="@Url.Content("~/Content/Styles/paymill_styles.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("https://bridge.paymill.de/")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/creditcardBrandDetection.js")" type="text/javascript"></script>
</head>
<body>

    @{
        ViewBag.Title = "Submit Payment";
    }


    <h1> Payment Form
    </h1>
    <div class="payment_errors">&nbsp;</div>


    @model Mvc5Application.Models.PaymillForm
    @using (Html.BeginForm("Submit", "Payment", FormMethod.Post, new { @name = "payment_form", @target = "_self" }))
    {
    
        <fieldset>
            <label for="card-number" class="card-number-label field-left"></label>

            @Html.TextBoxFor(x => x.CardNumber, new { @placeholder = "**** **** **** ****", @class = "card-number field-left", @maxlength = "19" })
            <label for="card-expiry" class="card-expiry-label field-right"></label>

            @Html.TextBoxFor(x => x.CardExpiry, new { @placeholder = "MM/YY", @class = "card-expiry field-right", @maxlength = "7" })

        </fieldset>
        <fieldset>
            <label for="card-holdername" class="card-holdername-label field-left"></label>
            @Html.TextBoxFor(x => x.CardHoldername, new { @placeholder = "Card Holder", @class = "card-holdername field-left", @maxlength = "19" })

            <label for="card-cvc" class="field-right">
                <span class="card-cvc-label"></span>
            </label>

            @Html.TextBoxFor(x => x.CardCvc, new { @placeholder = "CVC", @class = "card-cvc field-right", @maxlength = "4" })

        </fieldset>
        <fieldset>
            <label for="amount" class="amount-label field-left"></label>
            @Html.TextBoxFor(x => x.Amount, 
            new { @placeholder = "Amount", 
                @class = "amount field-left", 
                @maxlength = "10", @Value="10" })

            <asp:textbox id="tbAmount" class="" text="10"
                name="amount" runat="server" />
            <label for="currency" class="currency-label field-right"></label>

            @Html.TextBoxFor(x => x.Currency, new { @placeholder = "Currency", 
                @class = "currency field-right", @maxlength = "10", 
                @name = "currency", @Value="EUR" })

        </fieldset>
        <fieldset id="buttonWrapper">
            <button 
                    id="paymill-submit-button" 
                        class="submit-button btn btn-primary" 
                type="submit" value="Submit">Submit</button>

        </fieldset>
        
        @Html.Hidden("hToken", "");
    }

    <script type="text/javascript">
        $.noConflict();

        jQuery(document).ready(function ($) {
            var doc = document;
            var body = $(doc.body);
            $('.card-number').keyup(function () {
                var brand = paymill.cardType($('.card-number').val());
                brand = brand.toLowerCase();
                $(".card-number")[0].className = $(".card-number")[0].className.replace(/paymill-card-number-.*/g, '');
                if (brand !== 'unknown') {
                    $('#card-number').addClass("paymill-card-number-" + brand);
                }

                if (brand !== 'maestro') {
                    VALIDATE_CVC = true;
                } else {
                    VALIDATE_CVC = false;
                }
            });

            $('.card-expiry').keyup(function () {
                if (/^\d\d$/.test($('.card-expiry').val())) {
                    text = $('.card-expiry').val();
                    $('.card-expiry').val(text += "/");
                }
            });


            function PaymillResponseHandler(error, result) {
                if (error) {
                    $(".payment_errors").text(error.apierror);
                    $(".payment_errors").css("display", "inline-block");
                } else {
                    $(".payment_errors").css("display", "none");
                    $(".payment_errors").text("");
                    var form = $("#payment-form");
                    // Token
                    var token = result.token;
                    $('#hToken').val(token);
                    $(document.forms["payment_form"]).trigger('submit');
                    
                }
                $(".submit-button").removeAttr("disabled");
            }

            $('#paymill-submit-button').click(function () {
                $('.submit-button').attr("disabled", "disabled");

                paymenttype = $('.switch_button_active').length ? $('.switch_button_active').val() : 'cc';
                var expiry = $('.card-expiry').val();
                expiry = expiry.split("/");
                if (expiry[1] && (expiry[1].length <= 2)) {
                    expiry[1] = '20' + expiry[1];
                }
                if (false === paymill.validateExpiry(expiry[0], expiry[1])) {
                    $(".payment_errors").text("invalid-card-expiry-date");
                    $(".payment_errors").css("display", "inline-block");
                    $(".submit-button").removeAttr("disabled");
                    return false;
                }
                var params = {
                    amount_int: $('.amount').val() * 100,  // E.g. "15" for 0.15 Eur
                    currency: $('.currency').val(),    // ISO 4217 e.g. "EUR"
                    number: $('.card-number').val(),
                    exp_month: expiry[0],
                    exp_year: expiry[1],
                    cvc: $('.card-cvc').val(),
                    cardholder: $('.card-holdername').val()
                };

                paymill.createToken(params, PaymillResponseHandler);
                event.preventDefault();
            });
        });
    </script>
</body>
</html>

